import React, { Component } from 'react'
import axios from 'axios'

class Home extends Component {

    state = {
        list: [],
        flag: false
    }

    componentDidMount() {
        axios.get('/api/list').then((res) => {
            this.setState({
                list: res.data
            })
        })
    }

    clickBtn() {
        this.setState({
            flag: !this.state.flag
        })
    }

    render() {
        let { list, flag } = this.state
        return (
            <div>
                <h3 onClick={
                    this.clickBtn.bind(this)
                }>三</h3>
                <div className={flag ? 'active2' : 'active1'}>
                    {
                        list && list.length ? list.map((item,index) => {
                            return (
                                <div key={index}>
                                    <h3>{item.title}</h3>
                                    <p>{item.word}</p>
                                </div>
                            )
                        }) : ''
                    }
                </div>
            </div>
        )
    }
}

export default Home;